<!doctype html>
<html>
  <head>
    <meta charset="utf8" />
    <title>Taro 案例</title>
    <link href="https://taro.jd.com/css/home/out.css" rel="stylesheet">
    <link href="./style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC" rel="stylesheet">
    <style type="text/css">
    .header {
      height: 80px;
      position: relative;
      z-index: 10; }
    
    .nav {
      padding-top: 6px;
      height: 48px; }
      .nav_logo {
        box-sizing: content-box;
        float: left;
        position: relative;
        padding-top: 19px;
        width: 90px;
        height: 32px;
        margin-right: 10px;
        line-height: 30px;
        font-size: 24px;
        color: #fff;
        font-weight: 700;
        background: url() no-repeat 0 bottom;
        background-size: 44px auto;
        color: #2D3036;
        overflow: hidden;
        text-indent: -99em; }
        .nav_logo::after {
          content: '';
          position: absolute;
          bottom: 0;
          right: 0;
          width: 43px;
          height: 16px;
          background: url() no-repeat 0 0;
          background-size: 43px 16px; }
      .nav_list {
        float: left;
        margin-left: 100px; }
        .nav_list_item {
          position: relative;
          display: inline-block;
          min-width: 90px;
          height: 74px;
          text-align: center;
          margin-right: 10px; }
          .nav_list_item_l {
            position: relative;
            z-index: 1;
            font-size: 16px;
            padding: 0 10px;
            line-height: 74px;
            color: #2D3036;
            cursor: pointer;
            opacity: 0.8; }
            .nav_list_item_l:hover {
              color: #2D3036;
              opacity: 1; }
            .nav_list_item_l:active {
              color: #2D3036;
              opacity: 0.8; }
          .nav_list_item_current {
            position: relative; }
            .nav_list_item_current .nav_list_item_l {
              opacity: 1; }
            .nav_list_item_current:after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 50%;
              z-index: 0;
              width: 75%;
              height: 2px;
              transform: translateX(-50%);
              background: linear-gradient(to right, #00B2BD, #2CEB85); }
      .nav .user {
        float: right;
        padding-top: 21px; }
        .nav .user_btn {
          margin-left: 30px;
          display: inline-block;
          padding: 0 30px;
          font-size: 14px;
          line-height: 28px;
          border: 1px solid #2D3036;
          border-radius: 14px;
          color: #2D3036;
          transition: all 0.3s ease; }
          .nav .user_btn:hover {
            color: #367ff7;
            border-color: #367ff7; }
        .nav .user_info, .nav .user_loginout {
          font-size: 14px;
          line-height: 30px;
          color: #808080; }
          .nav .user_info:hover, .nav .user_loginout:hover {
            color: #367ff7; }
          .nav .user_info:active, .nav .user_loginout:active {
            color: #062ead; }
        .nav .user_info {
          margin-right: 30px; }
    
    .immersive.header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 10; }
      .immersive.header .nav_list_item_l {
        color: #fff;
        opacity: 0.8;
        text-shadow: 0 0 1px currentColor; }
        .immersive.header .nav_list_item_l:hover {
          opacity: 1;
          color: #fff; }
        .immersive.header .nav_list_item_l:active {
          opacity: 0.8; }
      .immersive.header .nav_list_item_current .nav_list_item_l {
        opacity: 1; }
      .immersive.header .user_btn {
        border-color: #fff;
        color: #fff;
        transition: all 0.3s ease; }
        .immersive.header .user_btn:hover {
          color: #0000C2;
          background: #fff;
          border-color: #fff; }
      .immersive.header .user_info,
      .immersive.header .user_loginout {
        color: #a4a4a4; }
    
    .tooltip {
      display: block;
      box-sizing: border-box;
      position: absolute;
      top: 45px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: opacity .3s ease-out;
      padding: 4px 0;
      margin-top: 2px;
      opacity: 0; }
      .tooltip_arrow_top {
        position: absolute;
        display: block;
        top: 0;
        left: 50%;
        width: 0;
        height: 0;
        margin-left: -4px;
        border: 4px solid transparent;
        border-top-width: 0;
        border-bottom-color: #000; }
      .tooltip_cont {
        display: block;
        box-sizing: border-box;
        padding: 4px 8px;
        max-width: 200px;
        color: #fff;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 4px;
        background-color: #000;
        word-wrap: break-word;
        white-space: nowrap; }
    
    .nav_list_item:hover .tooltip {
      opacity: 1;
      transition: opacity .3s ease-out; }
    </style>
    <style type="text/css">
    .footer {
      position: relative;
      z-index: 10;
      height: 500px;
      border-top: 1px solid #cad3f1;
      border-top: 1px solid rgba(164, 164, 164, 0.2); }
      .footer_cont {
        position: relative;
        box-sizing: content-box;
        height: 350px;
        padding-top: 100px; }
      .footer .footer_logo_container {
        display: inline-block;
        box-sizing: border-box;
        width: 390px; }
      .footer .footer_logo {
        width: 117px;
        height: 49px;
        background-image: url(//img20.360buyimg.com/ling/jfs/t1/20876/36/12835/3043/5c9c2929Ed18cfb11/15b1c03ec830ab8e.png);
        background-repeat: no-repeat;
        background-size: 100% auto; }
      .footer .footer_designedby {
        position: absolute;
        top: 300px;
        left: 0;
        width: 154px;
        height: 12px;
        background-image: url(//img30.360buyimg.com/ling/jfs/t1/33012/13/70/7004/5c9c2591E9cfedc30/28f3020042757672.png);
        background-repeat: no-repeat;
        background-size: 100% auto; }
      .footer .footer_link_container {
        display: inline-block;
        box-sizing: border-box;
        width: 800px;
        vertical-align: top; }
      .footer .footer_link {
        display: inline-block;
        width: 190px;
        margin-left: 10px;
        vertical-align: top; }
        .footer .footer_link_tit {
          padding-bottom: 20px;
          font-size: 18px;
          line-height: 27px;
          color: #333;
          vertical-align: middle; }
          .footer .footer_link_tit:before {
            content: '';
            display: inline-block;
            margin-right: 5px;
            vertical-align: middle; }
          .footer .footer_link_tit1::before {
            width: 22px;
            height: 22px;
            background: url() no-repeat 0 0;
            background-size: 22px 22px; }
          .footer .footer_link_tit2::before {
            width: 22px;
            height: 22px;
            background: url() no-repeat 0 0;
            background-size: 22px 22px; }
          .footer .footer_link_tit3::before {
            width: 22px;
            height: 22px;
            background: url() no-repeat 0 0;
            background-size: 22px 22px; }
          .footer .footer_link_tit4::before {
            width: 22px;
            height: 22px;
            background: url() no-repeat 0 0;
            background-size: 22px 22px; }
        .footer .footer_link .footer_link_connect {
          color: #666; }
        .footer .footer_link a,
        .footer .footer_link .footer_link_wechat {
          color: #666; }
          .footer .footer_link a .wechat_qrcode_icon,
          .footer .footer_link .footer_link_wechat .wechat_qrcode_icon {
            display: inline-block;
            margin-left: 5px;
            width: 18px;
            height: 18px; }
          .footer .footer_link a:hover,
          .footer .footer_link .footer_link_wechat:hover {
            opacity: 0.6; }
        .footer .footer_link .footer_link_wechat_img {
          position: absolute;
          top: -80px;
          left: 50px;
          width: 200px;
          display: none; }
          .footer .footer_link .footer_link_wechat_img img {
            width: 100%; }
        .footer .footer_link .footer_link_connect_wrap {
          position: relative;
          cursor: pointer; }
          .footer .footer_link .footer_link_connect_wrap:hover .footer_link_wechat_img {
            display: block; }
        .footer .footer_link p {
          font-size: 14px;
          margin-bottom: 8px; }
    
    .copyright {
      height: 50px;
      font-size: 14px;
      color: #9aa9e1;
      color: rgba(255, 255, 255, 0.6);
      background: #0000C2;
      text-align: center; }
      .copyright .in {
        line-height: 50px; }
    </style>
  </head>
  <body>
    <div class='index'>
      <div class="header clearfix immersive">
        <div class="nav">
          <div class="grid_c1">
            <a class="nav_logo" href="//taro.jd.com">Taro</a>
          <ul class="nav_list">
            <li class="nav_list_item nav_list_item_current"><a class="nav_list_item_l" href="//taro.jd.com" target="">首页</a></li>
            <li class="nav_list_item"><a class="nav_list_item_l" href="//taro-docs.jd.com" target="_blank">文档</a></li>
            <li class="nav_list_item"><a class="nav_list_item_l" href="//taro-ext.jd.com" target="">物料市场</a></li>
            <li class="nav_list_item"><a class="nav_list_item_l" href="//taro-club.jd.com" target="_blank">社区</a></li>
            <li class="nav_list_item"><a class="nav_list_item_l" href="//taro-ui.jd.com" target="_blank">Taro UI</a></li>
          </ul>
          </div>
        </div>
      </div>
      <div class="grid_c1 appwrap">
        <div id="app"></div>
      </div>
      <div class="footer"><div class="grid_c1 footer_cont"><div class="footer_logo_container"><div class="footer_logo"></div><span class="footer_designedby"></span></div><div class="footer_link_container"><div class="footer_link"><h3 class="footer_link_tit footer_link_tit1">相关资源</h3><p><a class="link" href="https://taro.js.org/" target="_blank">Taro</a></p><p><a class="link" href="https://taro-ui.aotu.io/" target="_blank">Taro UI</a></p><p><a class="link" href="https://at-ui.github.io/at-ui/#/zh" target="_blank">At-UI</a></p><p><a class="link" href="https://nerv.aotu.io/" target="_blank">Nerv</a></p><p><a class="link" href="https://athena.aotu.io/" target="_blank">Athena</a></p></div><div class="footer_link"><h3 class="footer_link_tit footer_link_tit2">社区</h3><p><a href="https://github.com/NervJS/taro/issues" target="_blank">GitHub</a></p><p><a href="https://taro-club.jd.com" target="_blank">Taro BBS</a></p><p class="footer_link_connect_wrap"><span class="footer_link_connect footer_link_wechat">微信<span class="wechat_qrcode_icon"><svg t="1554966525626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2588" data-spm-anchor-id="a313x.7781069.0.i0" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden;"><path d="M240.071 241.095h59.278v59.278h-59.278v-59.278z" fill="" p-id="2589"></path><path d="M405.959 134.485h-272.611v272.611h106.723v47.445h59.278v-47.445h106.723v-59.278h47.445v-47.445h-47.445l-0.114-165.888zM346.795 347.819h-154.169v-154.055h154.055v154.055h0.114zM240.071 727.154h59.278v59.278h-59.278v-59.278zM726.016 241.095h59.278v59.278h-59.278v-59.278zM512.683 509.042v63.943h59.278v-59.165h47.445v-59.278h-47.445v-47.445h-59.278v101.945zM512.683 725.789v60.643h59.278v-106.723h47.445v-59.278h-106.723v105.358zM571.961 786.432h47.445v47.445h-47.445v-47.445zM453.405 833.877v59.165h118.557v-59.165h-118.557z" fill="" p-id="2590"></path><path d="M678.685 679.709h-59.278v106.723h106.61v-59.278h-47.331v-47.445zM726.016 893.042h166.002v-59.165h-106.723v-47.445h-59.278v106.61zM892.018 513.821v-59.278h-106.723v59.278h106.723zM832.739 727.154h59.278v59.278h-59.278v-59.278zM453.405 347.819h59.278v59.278h-59.278v-59.278zM726.016 454.542v-47.445h166.002v-272.611h-272.611v59.278h-106.723v47.445h106.723v59.165h-47.445v47.445h47.445v59.278h59.278v47.445h47.331zM678.685 193.763h154.055v154.055h-154.055v-154.055zM678.685 572.985h47.331v47.445h-47.331v-47.445zM785.294 679.709h-59.278v47.445h106.723v-106.723h59.278v-47.445h-106.723v106.723zM453.405 241.095h59.278v59.278h-59.278v-59.278zM299.349 513.821h47.445v59.165h-47.445v-59.165zM453.405 454.542h-106.61v59.278h59.165v59.165h47.445v-118.443z" fill="" p-id="2591"></path><path d="M405.959 786.432v-106.723h47.445v-59.278h-213.333v-106.61h-106.723v59.278h59.278v47.445h-59.278v272.611h272.611v-59.278h47.445v-47.445h-47.445zM346.795 833.877h-154.169v-154.169h154.055v154.169h0.114zM453.405 572.985h59.278v47.445h-59.278v-47.445zM619.406 513.821h59.278v59.165h-59.278v-59.165zM726.016 513.821h59.278v59.165h-59.278v-59.165z" fill="" p-id="2592"></path></svg></span></span><span class="footer_link_wechat_img"><img src="https://camo.githubusercontent.com/10834a234b99a5880b5dff7c0ca7235e2a0772e7/687474703a2f2f696d6732302e333630627579696d672e636f6d2f7562612f6a66732f7432303139372f3238332f313638373136383837342f3133363034322f32623464383131662f35623330613635634e39643166303366312e706e67"></span></p></div><div class="footer_link"><h3 class="footer_link_tit footer_link_tit3">关于我们</h3><p><a href="https://aotu.io/" target="_blank">凹凸实验室</a></p><p><a href="https://aotu.io/join/" target="_blank">加入我们</a></p><p><a href="mailto:taro@jd.com?subject=【Taro 合作】合作标题">联系我们</a></p></div><div class="footer_link"><h3 class="footer_link_tit footer_link_tit4">感谢</h3><p><a href="http://jdc.jd.com/" target="_blank">用户体验设计部</a></p><p><a href="https://github.com/nervjs/taro#%E8%B4%A1%E7%8C%AE%E8%80%85%E4%BB%AC" target="_blank">Taro 贡献者们</a></p></div></div></div><div class="copyright"><div class="in">Copyright © 2019. All Rights Reserved. 粤ICP备15077732号-2</div></div></div>
    </div>
    <script src="./index.js"></script>
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7174e901581f5feaee1f909ce13af20b";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();
      </script>
  </body>
</html>
